<template>
	<view>
		<view class="padding">
			<view class="text-black">对比色：黑色</view>
			<view :class="'text-' + themeColor.name">主题色：{{ themeColor.title }}</view>
		</view>
		<view class="cu-list menu sm-border card-menu">
			<view class="cu-item">
				<view class="content flex align-center">
					<text class="cuIcon-colorlens" :class="'text-' + themeColor.name"></text>
					<view class="padding solid radius shadow-blur" :class="'bg-' + themeColor.name"></view>
				</view>
				<view class="action">
					<button class="cu-btn round shadow" @click="showColorModal" :class="'bg-' + themeColor.name">
						<text class="cuIcon-colorlens"></text>
						选择颜色
					</button>
				</view>
			</view>
		</view>
		<!-- modal -->
		<!-- 选择颜色模态框 -->
		<view class="cu-modal" :class="{ show: colorModal }">
			<view class="cu-dialog">
				<view class="cu-bar justify-end solid-bottom">
					<view class="content">选择颜色</view>
					<view class="action" @tap="colorModal = false"><text class="cuIcon-close text-red"></text></view>
				</view>
				<view class="grid col-5 padding">
					<view class="padding-xs" v-for="(item, index) in ColorList" :key="index" @tap="SetColor(item)" :data-color="item.name">
						<view class="padding-tb radius" :class="'bg-' + item.name">{{ item.title }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {setColorCofig, getColorCofig} from '../../../static/utils/ahth.js'
export default {
	data() {
		return {
			colorModal: false,
			themeColor: {
				name:'red'
			},
			ColorList: [
				{
					title: '嫣红',
					name: 'red',
					color: '#F23A3A'
				},
				{
					title: '桔橙',
					name: 'orange',
					color: '#f37b1d'
				},
				{
					title: '明黄',
					name: 'yellow',
					color: '#fbbd08'
				},
				{
					title: '橄榄',
					name: 'olive',
					color: '#8dc63f'
				},
				{
					title: '森绿',
					name: 'green',
					color: '#39b54a'
				},
				{
					title: '天青',
					name: 'cyan',
					color: '#1cbbb4'
				},
				{
					title: '海蓝',
					name: 'blue',
					color: '#0081ff'
				},
				{
					title: '姹紫',
					name: 'purple',
					color: '#6739b6'
				},
				{
					title: '木槿',
					name: 'mauve',
					color: '#9c26b0'
				},
				{
					title: '桃粉',
					name: 'pink',
					color: '#e03997'
				},
				{
					title: '棕褐',
					name: 'brown',
					color: '#a5673f'
				},
				{
					title: '玄灰',
					name: 'grey',
					color: '#8799a3'
				},
				{
					title: '草灰',
					name: 'gray',
					color: '#aaaaaa'
				},
				{
					title: '墨黑',
					name: 'black',
					color: '#333333'
				},
				{
					title: '雅白',
					name: 'white',
					color: '#ffffff'
				}
			]
		};
	},
	onShow() {
		this.themeColor = getColorCofig()
		this.changeTabBar(this.themeColor.color)
	},
	methods: {
		showColorModal() {
			this.colorModal = true;
		},
		SetColor(item) {
			this.colorModal = false;
			setColorCofig(item)
			this.changeTabBar(item.color);
			this.themeColor = item
			uni.showToast({
				title:'切换主题成功',
			})
		},
		changeTabBar(val) {
			console.log('执行了', val);
			uni.setNavigationBarColor({
			    frontColor: '#ffffff',
			    backgroundColor: val,
			    animation: {
			        duration: 400,
			        timingFunc: 'easeIn'
			    }
			})
		}
	}
};
</script>

<style lang="scss" scoped>
	.cu-list{
		box-shadow: 0px 0px 10upx #DDDDDD;
	}
</style>
